<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>
        突出一个有影响的国家|样品 |适用于 JavaScript 4.18 的 ArcGIS API
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #messageDiv {
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/Map", "esri/views/MapView", "esri/layers/TileLayer", "esri/Graphic",
            "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/layers/GroupLayer"
        ], function (
            Map, MapView, TileLayer, Graphic, FeatureLayer, GraphicsLayer, GroupLayer
        ) {
            const worldImagery = new TileLayer({
                portalItem: {
                    id: "10df2279f9684e4a9f6a7f08febac2a9" //世界镜像
                }
            });

            //该图层仅用于在点击地图时查询相交的国家
            const countries = new FeatureLayer({
                portalItem: {
                    id: "53a1e68de7e4499cad77c80daba46a94"
                }
            });

            //单击的国家功能将添加到此图层
            const graphicsLayer = new GraphicsLayer({
                blendMode: "destination-in",
                title: "layer"
            });

            const tileLayer = new TileLayer({
                portalItem: {
                    //底图中的图层
                    id: "10df2279f9684e4a9f6a7f08febac2a9" //世界镜像
                }
            });

            //这个 grouplayer 有两个图层 destination-in blendMode 设置在图形层 country 上，当用户点击一个国家时，世界图像层将显示
            const groupLayer = new GroupLayer({
                layers: [
                    tileLayer,
                    //世界图像层将显示它与图形层重叠的位置
                    graphicsLayer
                ],
                opacity: 0 //最初这一层将是透明的
            });

            const map = new Map({
                layers: [worldImagery, groupLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 6,
                center: [2, 46],
                popup: null,
                constraints: {
                    snapToZoom: false,
                    minScale: 147914381
                }
            });


            const query = {
                //几何:应用于空间过滤器的几何。可以是Extent , Mesh , Multipoint , Point , Polygon , Polyline
                geometry: view.center,
                //如果true，则返回的FeatureSet中的每个要素都包含几何。
                returnGeometry: true,
                //要包含在 FeatureSet 中的属性字段
                outFields: ["*"]
            };

            view.when(function () {
                highlightCountry(query, view.center);
            });


            // 监听视图的点击事件
            view.on("click", async (event) => {
                query.geometry.geometry = view.toMap(event);
                highlightCountry(query, query.geometry);
            });


            async function highlightCountry(query, zoomGeometry) {
                //国家符号 - 当用户点击一个国家时，我们将从国家特征层查询国家，将国家特征添加到图形层。
                const symbol = {
                    type: "simple-fill",
                    color: "rgba(255, 255, 255, 1)",
                    outline: null
                };

                //查询与单击点相交的国家/地区的国家/地区图层
                const {
                    features: [feature]
                } = await countries.queryFeatures(query);


                //用户点击一个国家并返回该功能
                if (feature) {
                    graphicsLayer.graphics.removeAll();

                    feature.symbol = symbol;
                    //将国家添加到图形层
                    graphicsLayer.graphics.add(feature);
                    //放大到突出显示的国家
                    view.goTo(
                        {
                            target: zoomGeometry,
                            extent: feature.geometry.extent.clone().expand(1.8)
                        },
                        {duration: 1000}
                    );
                    //模糊世界图像底图，以便可以突出显示单击的国家/地区
                    worldImagery.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
                    //将图层组透明度设置为 1。同时增加图层亮度并添加阴影，使单击的国家/地区脱颖而出。
                    groupLayer.effect = "brightness(1.5) drop-shadow(0, 0px, 12px)";
                    groupLayer.opacity = 1;
                }
                //没有点击一个国家。移除效果
                else {
                    worldImagery.effect = null;
                    groupLayer.effect = null;
                }
            }
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
